<template>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        size="80%"
        :before-close="handleClose">
        <div class="month-list-setting">
            <div class="title-box"> 
                <span class="title">设置{{title}}</span>
            </div>
            <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <!-- <el-button :disabled="tableSelectList.length === 0" @click="handleRanking('add')" type="primary" plain icon="el-icon-plus" size="mini">
                    批量纳入
                </el-button> -->
                <el-button :disabled="tableSelectList.length === 0" @click="handleRanking('delete')" type="primary" plain icon="el-icon-plus" size="mini">
                    批量不纳入
                </el-button>
            </el-col>
        </el-row>
            <el-table style="width: 100%" :data="tableData" ref="singleTable" 
                @selection-change="handleSelectionChange"
                max-height="500"
                highlight-current-row row-key="id" class="load_table">
                <el-table-column type="selection"
                       align="center"></el-table-column>
                <el-table-column label="操作" align="center"  width="100">
                    <template slot-scope="scope">
                        <div class="img-box">
                            <img src="@/assets/icons/drag.png" class="icon" alt="" style="width: 30px;height: 30px;">
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" align="center"></el-table-column>
                <el-table-column label="操作" align="center"  width="160">
                    <template slot-scope="scope">
                    <div class="btn-box">
                        <el-button type="primary" plain @click="handleDelete(scope.row)">不纳入{{title}}</el-button>
                    </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleConfirm">确 定</el-button>
        </span>
    </el-dialog>
</template>
<script>
// getNewsStudyRankingList
import { getNewsStudyRankingList, updateRankingInfoSort, deleteNewsRankingInfo, updateBatch } from '@/api/content-manage/researchResult.js';
import Sortable from "sortablejs";
import FormGroup from '@/views/components/FormGroup';
import FileUpload from '@/components/FileUpload';
import { TYPE } from '../initData';
export default {
    name: 'SetRankingList',
    components: {
        FormGroup,
        FileUpload
    },
    data() {
        return {
            dialogVisible: false,
            sortable: null,
            tableData: [],
            title: '',
            tableSelectList: [],
            operate: ''
        }
    },
    methods: {
        open({operate}) {
            this.dialogVisible = true;
            this.title = operate === 'month' ? '月榜' : '周榜';
            this.operate = operate;
            
            this.$nextTick(() => {
                this.dragSort();
            });
            this.getNewsStudyRankingList();
        },
        async getNewsStudyRankingList() {
            // type - 1:周榜2:月榜
            const { code, data } = await getNewsStudyRankingList({
                type: this.operate === 'month' ? '2' : '1'
            });
            if (code === 0) {
                this.tableData = data;
            } else {
                this.tableData = [];
            }
        },
        handleClose() {
            this.dialogVisible = false;
            this.resetData();
        },
        async handleConfirm() {
            const ids = this.tableData.map(v => v.id);
            const { code } = await updateRankingInfoSort({ids, operate: this.operate, type: TYPE});
            if (code === 0) {
                this.$message.success('设置成功');
                this.resetData();
                this.$emit('success');
            } else {
                this.$message.error('设置失败，请重试');
            }
        },
        // 保存关闭后 重置数据
        resetData() {
            this.dialogVisible = false;
            this.tableSelectList = [];
            this.tableData = [];
        },
        handleRanking(meth) {
            if (!this.tableSelectList || this.tableSelectList.length === 0) {
                this.$message.warning('请选择至少一条信息');
                return;
            }
            const title = this.operate === 'month' ? '月榜' : '周榜' + meth === 'add' ? '纳入' : '不纳入';
            this.$confirm(`确定批量${title}?`, '提示').then( async() => {
                const ids = this.tableSelectList.map(v => v.id);
                await this[meth]({ ids });
            })
        },
        // 点击不纳入月榜
        handleDelete(row) {
            const marks = this.operate === 'month' ? '月榜' : '周榜'
            this.$confirm(`确定不纳入${marks}?`, '提示').then(() => {
                this.delete({ids: [row.id]});
            })
        },
        async delete({ids}) {
            const { code, msg } = await deleteNewsRankingInfo({
                ids,
                operate: this.operate,
                type: TYPE,
                queryType: 'ranking'
            });
            if (code === 0) {
                this.$message.success('操作成功');
                await this.getNewsStudyRankingList();
                if (!this.tableData || this.tableData.length === 0) {
                    this.dialogVisible = false;
                    this.$emit('success');
                }
            } else {
                this.$message.error(msg);
            }
        },
        async add({ids}) {
            const { code, msg } = await updateBatch({
                operate: this.operate,
                ids,
                type: TYPE
            });
            if (code === 0) {
                this.$message.success('操作成功');
                this.getNewsStudyRankingList();
            } else {
                this.$message.error(msg);
            }
        },
        handleSelectionChange(val) {
            this.tableSelectList = val;
        },
        //表格拖动排序
        dragSort() {
            if (!this.$refs.singleTable) return;
            const el = this.$refs.singleTable.$el.querySelectorAll(
                ".el-table__body-wrapper > table > tbody"
            )[0];
            this.sortable = Sortable.create(el, {
                ghostClass: "sortable-ghost",
                setData: function (dataTransfer) {
                    dataTransfer.setData("Text", "");
                },
                onEnd: (e) => {
                    console.log(e, '----拖动结果')
                    const targetRow = this.tableData.splice(e.oldIndex, 1)[0];
                    this.tableData.splice(e.newIndex, 0, targetRow);
                    //这块根据自己需求处理
                    let temp = [];
                    this.tableData.map((m, i) => {
                        temp.push({
                            id: m.id,
                            seq: i,
                        });
                    });
                },
            });
        },
    }
}
</script>

<style lang='scss' scoped>
    .month-list-setting {
        margin-bottom: 20px;
        .title-box {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 20px;
            .title {
                font-size: 26px;
                font-weight: bold;
                margin-right: 15px;
            }
        }
        
    }

    
</style>